<template>
  <div class="change-history">
    <div class="container">
      <section :class="{'emptySec': emptyHistoryFlag || loadHistoryFlag}">
        <a-empty v-show="emptyHistoryFlag" />
        <div class="loaddingbox" v-show="loadHistoryFlag">
          <a-spin spinning :delay="10" tip="加载中" />
        </div>
        <a-card size="small">
          <a-timeline>
            <a-timeline-item v-for="(item, index) of histroyList" :key="index">
              <div class="content" v-if="item.afterContent">
                {{ item.createUserName }} 更新了{{ item.changeField }}，{{ item.beforeContent }} 修改为
                {{ item.afterContent }}
              </div>
              <div class="content" v-else>
                {{ item.createUserName }} 添加了{{ item.changeField }} {{ item.beforeContent }}
              </div>
              <div class="time">{{ item.createDate }}</div>
            </a-timeline-item>
          </a-timeline>
        </a-card>
        <template>
          <a-pagination
            :pageSize="pageSize"
            :hideOnSinglePage="true"
            show-less-items
            :total="total"
            class="pagecontent"
            @change="onChangeHistroyPage"
            key="HistroyPage"
          />
        </template>
      </section>
    </div>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
export default {
  name: 'TaskChangeHistory',
  props: {
    hid: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      histroyList: [],
      emptyHistoryFlag: false,
      loadHistoryFlag: true,
    }
  },
  mounted() {
    this.quyChangeList()
    this.pageIndex = 1
  },
  methods: {
    quyChangeList() {
      getAction('/projectWorkTask/changeList', {
        pageSize: this.pageSize,
        pageNo: this.pageIndex,
        id: this.hid,
      }).then((res) => {
        if (res.code == 200 && res.result && res.result.records) {
          this.histroyList = res.result.records || []
          this.total = res.result.total
          this.emptyHistoryFlag = this.total == 0 ? true : false
          this.loadHistoryFlag = false
        } else {
          this.$message.warning('数据加载失败:' + res.message)
          this.emptyHistoryFlag = true
          this.loadHistoryFlag = false
        }
      })
    },
    onChangeHistroyPage(current) {
      this.pageIndex = current
      this.quyChangeList()
    },
  },
}
</script>
<style lang="less" scoped>
.change-history {
  .content {
    width: 80%;
    color: #333;
  }
  .time{
    color: #999;
  }
  .pagecontent {
    padding: 10px 2px 0 2px;
    text-align: right;
  }
  .loaddingbox {
    text-align: center;
    padding: 50px;
  }
  /deep/.ant-timeline-item-content {
    display: flex;
    justify-content: space-between;
  }
  /deep/ .ant-card-small > .ant-card-body {
    padding: 22px 22px 0 22px;
  }
  /deep/ .emptySec .ant-card-small > .ant-card-body {
    padding: 0;
  }
  /deep/ .emptySec .ant-card-bordered {
    border: none;
  }
}
</style>
